import React from 'react';
import $ from 'jquery';
import Mask from './mask';
require('../../css/btn-bar');

export default class BtnBarDrop extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            stateActive: false,
            stateType: [],
            stateTxt:this.props.stateTxt
        };
        this.handleClick = this.handleClick.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }
    static propTypes = {
        stateTxt: React.PropTypes.string.isRequired,
        btnType: React.PropTypes.string.isRequired
    };
    handleClick(){
        this.setState({
            stateActive:!this.state.stateActive
        });
    }
    handleChange(){
        console.log("hello",this)
    }
    render(){
        let stateActive = this.state.stateActive;
        return (
            <div className="btn-bar-drop">
                <div onClick={this.handleClick} className="handle-wrap"><span>{this.state.stateTxt}</span></div>
                <div className="children-wrap">
                    {stateActive?this.props.children:''}
                </div>
                {stateActive?<Mask show={true} onShift={this.handleClick} />:''}
            </div>
        )
    }
}